<template>
  <div class="container" ref="box">
    <!-- 卡片 element-ui 组件 -->
    <el-card class="my-card">
      <span class="title">后台管理系统</span>
      <el-form ref="loginForm" :model="loginForm" :rules="loginRules" status-icon>
        <el-form-item prop="userName">
          <el-input v-model="loginForm.userName" placeholder="请输入用户名" clearable>
            <i slot="prefix" class="el-icon-user-solid el-input__icon icon userName"></i>
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            v-model="loginForm.password"
            placeholder="请输入密码"
            clearable
            show-password
            maxlength="16"
          >
            <i slot="prefix" class="el-input__icon icon pwd"></i>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-checkbox style="color: #005ba7" v-model="isChecked">我已阅读并同意用户协议和隐私条款</el-checkbox>
          <span class="readClick" @click="dialogVisible = true">点击阅读</span>
        </el-form-item>
        <el-form-item>
          <el-button
            @click="login()"
            :disabled="!isChecked"
            type="primary"
            :class="['is-disabled' ? '!isChecked':'isChecked']"
          >登 录</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-dialog title="用户协议和隐私条款" :visible.sync="dialogVisible" width="30%">
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// import store from '../store/index'
import { mapMutations } from 'vuex'
export default {
  data () {
    let checkMobile = (rule, value, callback) => {
      if (!/^[A-Za-z0-9]{5,40}$/.test(value)) {
        return callback(new Error('用户名格式不正确'))
      }
      callback()
    }
    return {
      dialogVisible: false,
      loginForm: {
        userName: '',
        password: ''
      },
      loginRules: {
        userName: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { validator: checkMobile, trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请填写密码', trigger: 'blur' }
        ]
      },
      isChecked: false
    }
  },
  methods: {
    ...mapMutations(['setToken', 'delToken']),
    login () {
      // 调用 validate 对整体表进行校验
      this.$refs.loginForm.validate(async valid => {
        if (valid) {
          try {
            const data = await this.$api.login.login(this.loginForm)
            if (data.ok === false) {
              this.$message.error('用户名或密码错误')
              this.delToken()
              return false
            }
            // const token = JSON.parse(data);
            //! 此处token设置使用的是假数据，真实开发中需要根据发送请求后响应的结果来设置token
            this.setToken(data)
            // store.commit("setToken",data)
            this.$router.push('/')
            this.$message({
              message: '登录成功',
              type: 'success'
            });
          } catch (e) {
            this.$message.error('登录异常')
          }
        }
      })
    }
  }
}
</script>

<style scoped lang='scss'>
.container {
  background: url('../../assets/images/bg1.jpg') no-repeat center / cover;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  .my-card {
    width: 400px;
    height: 400px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    padding: 0 20px;
    .title {
      display: inline-block;
      width: 100%;
      font-size: 20px;
      text-align: center;
      font-weight: 700;
      margin-bottom: 30px;
      margin-top: 10px;
    }
    img {
      width: 200px;
      display: block;
      margin: 0 auto 20px;
    }
    .el-input {
      height: 42px;
    }
    .el-button {
      width: 100%;
      background: #005ba7;
      border-color: #005ba7;
    }
    .is-disabled {
      background: #b1b1b1;
      border-color: #b1b1b1;
    }
    /deep/ .el-input__inner {
      padding-left: 50px;
    }
    /deep/ .el-form-item__error {
      left: 10%;
    }
    /deep/ .el-checkbox__label {
      color: #005ba7;
    }
    /deep/ .el-checkbox__inner {
      border-color: #005ba7;
    }
    /deep/ .el-checkbox {
      margin-top: 20px;
    }
    /deep/ .el-checkbox__input.is-checked .el-checkbox__inner {
      background-color: #005ba7;
    }
  }
}
.icon {
  display: block;
  height: 40px;
  width: 40px;
  margin-right: 20px;
}
.pwd {
  background: url('../../assets/images/icon/password.png') no-repeat center;
}
.userName {
}
.el-icon-user-solid:before {
  font-size: 26px;
  color: #0059a8;
}
.reset-pwd {
  display: block;
  color: #005ba7;
  font-size: 14px;
  text-decoration: none;
  position: absolute;
  right: 0;
  cursor: pointer;
}
.registered {
  color: #005ba7;
}
.readClick {
  padding-left: 50px;
  cursor: pointer;
  color: #005ba7;
}
</style>
